<template>
  <div>
    <div v-show="showList">
      <!-- 表单 -->
      <el-form label-position="left" size="small" :model="queryParams" :inline="true" label-width="100px">
        <el-form-item label="课程名称" style="font-weight:bold;">
          <el-input v-model="queryParams.name" placeholder="请输入课程名称" style="width:180px;" clearable></el-input>
        </el-form-item>
        <el-form-item label="发起人姓名" style="font-weight:bold;">
          <el-input v-model="queryParams.userName" placeholder="请输入姓名" style="width:180px;" clearable></el-input>
        </el-form-item>
        <el-form-item label="学工号" style="font-weight:bold;">
          <el-input v-model="queryParams.num" placeholder="请输入学工号" style="width:180px;" clearable></el-input>
        </el-form-item>
        <el-form-item label="开始时间" style="font-weight:bold;">
          <el-date-picker v-model="queryParams.startDate" type="date" placeholder="选择日期" format="yyyy 年 MM 月 dd 日"
            value-format="yyyy-MM-dd" style="width:180px;" clearable>
          </el-date-picker>
        </el-form-item>
        <el-form-item label="结束时间" style="font-weight:bold;">
          <el-date-picker v-model="queryParams.endDate" type="date" placeholder="选择日期" format="yyyy 年 MM 月 dd 日"
            value-format="yyyy-MM-dd" style="width:180px;" clearable>
          </el-date-picker>
        </el-form-item>
        <el-form-item label="课程状态" style="font-weight:bold;">
          <el-select v-model="queryParams.type" placeholder="请选择课程状态" style="width:180px;" clearable>
            <el-option label="未开始" value="0"></el-option>
            <el-option label="进行中" value="1"></el-option>
            <el-option label="已结束" value="2"></el-option>
            <el-option label="已暂停" value="3"></el-option>
          </el-select>
        </el-form-item>

        <!-- <el-form-item label="课程ID" style="font-weight:bold;">
          <el-input v-model="queryParams.userNum" placeholder="请输入ID" style="width:180px;" clearable></el-input>
        </el-form-item> -->
        <el-button size="small" class="search_botton" type="primary" icon="el-icon-search"
          @click="getCourseList">查询</el-button>
        <el-button size="small" class="reset_botton" icon="el-icon-refresh" @click="reset">重置</el-button>
      </el-form>
      <!-- 表单 -->

      <el-button plain class="addBtn" size="mini" type="success" icon="el-icon-folder-add"
        @click="addCourse">新增课程</el-button>

      <el-divider></el-divider>

      <!-- 表格 -->
      <el-table size="medium" :data="tableData" border style="width: 100%">
        <el-table-column prop="id" label="序号" align="center" min-width="100"></el-table-column>
        <el-table-column prop="name" label="课程名称" align="center" min-width="100"></el-table-column>
        <el-table-column prop="userName" label="发起人姓名" align="center"></el-table-column>
        <el-table-column prop="userNum" label="学工号" align="center"></el-table-column>
        <el-table-column prop="startDate" label="课程开始时间" align="center"></el-table-column>
        <el-table-column prop="endDate" label="课程结束时间" align="center"></el-table-column>
        <el-table-column prop="createDate" label="创建时间" align="center"></el-table-column>
        <el-table-column prop="state" label="活动状态" align="center" min-width="100">
          <template slot-scope="scope">
            <span v-if="(scope.row.state == 0)">未开始</span>
            <span v-if="(scope.row.state == 1)">进行中</span>
            <span v-if="(scope.row.state == 2)">已结束</span>
            <span v-if="(scope.row.state == 3)">已暂停</span>
          </template>
        </el-table-column>
        <!-- <el-table-column prop="" label="课程ID" align="center" min-width="100"></el-table-column> -->
        <el-table-column label="操作" align="center" width="220">
          <template slot-scope="scope">
            <el-button size="mini" type="success" @click="lookDetail(scope.row)" plain>查看</el-button>
            <el-button size="mini" type="primary" @click="changeCourse(scope.row)" plain>修改</el-button>
            <el-button size="mini" type="danger" @click="removeCourse(scope.row.id)" plain>删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 表格 -->
      <el-pagination class="pagination" background layout="total, sizes, prev, pager, next, jumper" :total="total"
        :page-size="10" :page-sizes="[10, 20, 30, 40]" @current-change="handleCurrentChange"
        @size-change="handleSizeChange"></el-pagination>
    </div>

    <div v-show="!showList">
      <div class="navTabBox">
        <div class="navTab">
          <el-breadcrumb separator="/">
            <el-breadcrumb-item>课程管理</el-breadcrumb-item>
            <el-breadcrumb-item>{{ courseDetail.name }}</el-breadcrumb-item>
            <el-breadcrumb-item>导学</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <i class="el-icon-back" id="back" @click="showList = true"></i>
      </div>

      <el-tabs v-model="active" type="border-card" style="margin-top:20px;" @tab-click="handleClickTab">
        <el-tab-pane name="first">
          <span slot="label"><i class="el-icon-date"></i> 导学</span>
          <div class="content">
            <div class="content_top">
              <img style="width:200px;height:120px;"
                src="https://img2.baidu.com/it/u=1883766601,2699046862&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500">
              <div class="content_top_right">
                <div>{{ courseDetail.name }}</div>
                <div>
                  <p style="font-weight:bold;display:inline;">课程简历:</p>
                  {{ courseDetail.introduction }}
                </div>
              </div>
            </div>
            <!-- <div class="content_center">
              <div style="width:300px;">
                <p style="font-weight:bold;display:inline;">班级名称:</p> xxxxxxxxx
              </div>
              <div style="margin-left:60px;">
                <p style="font-weight:bold;display:inline;">QQ群:</p> xxxxxxxxx
              </div>
            </div> -->
            <!-- <div class="content_center">
              <div style="width:300px;">
                <p style="font-weight:bold;display:inline;">授课老师:</p> xx
              </div>
              <div style="margin-left:60px;">
                <p style="font-weight:bold;display:inline;">微信群:</p> xxxxxxxxx
              </div>
            </div> -->
          </div>
        </el-tab-pane>
        <el-tab-pane name="second">
          <span slot="label"><i class="el-icon-date"></i> 成员管理</span>
          <div class="content">
            <!-- 表单 -->
            <el-form size="small" :inline="true" label-width="70px">
              <el-form-item label="姓名" style="font-weight:bold;">
                <el-input v-model="formSearchMember.userName" placeholder="请输入姓名" style="width:180px;"
                  clearable></el-input>
              </el-form-item>
              <el-form-item label="学号" style="font-weight:bold;">
                <el-input v-model="formSearchMember.userNum" placeholder="请输入学号" style="width:180px;"
                  clearable></el-input>
              </el-form-item>

              <el-button size="small" class="search_botton" type="primary" icon="el-icon-search">查询</el-button>
              <el-button size="small" class="reset_botton" icon="el-icon-refresh">重置</el-button>
              <el-button plain class="addBtn" size="mini" type="success" icon="el-icon-folder-add"
                @click="memberManage = true">新增成员</el-button>
            </el-form>
            <!-- 表单 -->
            <!-- 表格 -->
            <el-table size="medium" :data="tableDataMember" border style="width: 100%">
              <el-table-column prop="id" label="序号" align="center"></el-table-column>
              <el-table-column prop="name" label="姓名" align="center"></el-table-column>
              <el-table-column prop="number" label="学号" align="center"></el-table-column>
              <el-table-column prop="inDate" label="加入时间" align="center"></el-table-column>
              <el-table-column prop="phone" label="联系方式" align="center"></el-table-column>
              <!-- <el-table-column prop="" label="班级" align="center"></el-table-column> -->
              <el-table-column label="操作" align="center" width="220">
                <template slot-scope="scope">
                  <el-button size="mini" type="success" plain @click="lookMemberSubmitWork">查看</el-button>
                  <!-- <el-button size="mini" type="primary" plain>编辑</el-button> -->
                  <el-button size="mini" type="danger" plain @click="removeUser(scope.row.id)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
            <!-- 表格 -->
          </div>
        </el-tab-pane>
        <el-tab-pane name="third">
          <span slot="label"><i class="el-icon-date"></i> 课程任务</span>
          <div class="content">
            <div class="content_nav">
              <div class="content_nav_left">{{ courseDetail.name }}</div>
              <el-button class="content_nav_right" plain size="mini" type="success" icon="el-icon-folder-add"
                @click="workManage = true">新增任务</el-button>
            </div>
            <div class="workItem" v-for="(item, index) in dataCourseWork" :key="item.activeTask.id">
              <div class="workItem_num">{{ index + 1 }}</div>
              <div class="workItem_content">
                <div class="workItem_content_left">
                  <div style="font-weight:bold;width:400px;">任务{{ index +
                    1 }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ item.activeTask.name }}</div>
                  <div>分值({{ item.activeTask.score }})</div>
                </div>
                <div class="workItem_content_left">
                  <div style="font-weight:bold;font-size:14px;">时间:&nbsp;&nbsp;</div>
                  <div style="font-size:14px;">{{ item.activeTask.starteTime }} ~ {{ item.activeTask.endTime }}</div>
                </div>
                <div class="workItem_content_Left">
                  <div style="font-weight:bold;font-size:14px;">要求:&nbsp;&nbsp;</div>
                  <div style="font-size:14px;">{{ item.activeTask.requirement }}</div>
                </div>
              </div>
              <div class="workItem_person">{{ item.count }}人参与</div>
              <div class="workItem_look" @click="lookWorkDetail(item)">
                <i class="el-icon-full-screen workItem_look_screen"></i>
                <i class="el-icon-view workItem_look_view"></i>
                <div class="workItem_look_text">查看</div>
              </div>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>


    <el-dialog :title="title" :visible.sync="courseManage" width="50%" center top="5vh">
      <el-form label-position="right" size="small" :model="formCourse" label-width="200px">
        <el-form-item label="活动/课程名称" style="font-weight:bold;">
          <el-input v-model="formCourse.name" placeholder="请输入活动/课程名称" style="width:400px;" clearable></el-input>
        </el-form-item>
        <el-form-item label="发起人姓名" style="font-weight:bold;">
          <el-input disabled v-model="formCourse.sponsor" placeholder="请输入姓名" style="width:400px;" clearable></el-input>
        </el-form-item>
        <el-form-item label="学工号" style="font-weight:bold;">
          <el-input disabled v-model="formCourse.sponsorNum" placeholder="请输入学工号" style="width:400px;"
            clearable></el-input>
        </el-form-item>
        <el-form-item label="联系方式" style="font-weight:bold;">
          <el-input v-model="formCourse.phone" placeholder="请输入手机号" style="width:400px;" clearable></el-input>
        </el-form-item>
        <el-form-item label="主办单位" style="font-weight:bold;">
          <el-input v-model="formCourse.organizer" placeholder="请输入主办单位" style="width:400px;" clearable></el-input>
        </el-form-item>
        <el-form-item label="开始时间" style="font-weight:bold;">
          <el-date-picker v-model="formCourse.starteTime" type="date" placeholder="选择日期" format="yyyy 年 MM 月 dd 日"
            value-format="yyyy-MM-dd" style="width:400px;" clearable>
          </el-date-picker>
        </el-form-item>
        <el-form-item label="结束时间" style="font-weight:bold;">
          <el-date-picker v-model="formCourse.endTime" type="date" placeholder="选择日期" format="yyyy 年 MM 月 dd 日"
            value-format="yyyy-MM-dd" style="width:400px;" clearable>
          </el-date-picker>
        </el-form-item>
        <el-form-item label="加入权限" style="font-weight:bold;">
          <el-select v-model="formCourse.type" placeholder="请选择" style="width:400px;" clearable>
            <el-option label="所有人可加入" value="0"></el-option>
            <el-option label="审核后加入" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="活动/课程简介" style="font-weight:bold;">
          <el-input type="textarea" v-model="formCourse.introduction" placeholder="请输入活动/课程简介" style="width:400px;"
            clearable></el-input>
        </el-form-item>
        <el-form-item label="完成活动/课程要求" style="font-weight:bold;">
          <el-input type="textarea" v-model="formCourse.ask" placeholder="请输入完成活动/课程要求" style="width:400px;"
            clearable></el-input>
        </el-form-item>
        <!-- <el-form-item label="活动/课程封面" style="font-weight:bold;">
          <el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/" :show-file-list="false"
            :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
            <img v-if="formCourse.cover" :src="formCourse.cover" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item> -->
      </el-form>
      <span slot="footer">
        <el-button type="primary" @click="comfirmCourse">{{ confirm }}</el-button>
      </span>
    </el-dialog>


    <el-dialog title="新增成员" :visible.sync="memberManage" width="50%" center>
      <el-form label-position="right" size="small" :model="formNewMember" label-width="200px">
        <el-form-item label="学生姓名" style="font-weight:bold;">
          <el-input v-model="formNewMember.name" placeholder="请输入学生姓名" style="width:400px;" clearable></el-input>
        </el-form-item>
        <el-form-item label="学号" style="font-weight:bold;">
          <el-input v-model="formNewMember.num" placeholder="请输入学号" style="width:400px;" clearable></el-input>
        </el-form-item>
        <!-- <el-form-item label="班级" style="font-weight:bold;">
          <el-input v-model="formNewMember.userNum" placeholder="请输入班级" style="width:400px;" clearable></el-input>
        </el-form-item> -->
        <el-form-item label="联系方式" style="font-weight:bold;">
          <el-input v-model="formNewMember.phone" placeholder="请输入手机号" style="width:400px;" clearable></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer">
        <el-button type="primary" @click="addMember">确定新增</el-button>
      </span>
    </el-dialog>


    <el-dialog title="新增任务" :visible.sync="workManage" width="50%" center>
      <el-form label-position="right" size="small" :model="formNewWork" label-width="200px">
        <el-form-item label="任务名" style="font-weight:bold;">
          <el-input v-model="formNewWork.name" placeholder="请输入" style="width:400px;" clearable></el-input>
        </el-form-item>
        <el-form-item label="任务开始时间" style="font-weight:bold;">
          <el-date-picker v-model="formNewWork.starteTime" type="date" placeholder="选择日期" format="yyyy 年 MM 月 dd 日"
            value-format="yyyy-MM-dd" style="width:400px;" clearable>
          </el-date-picker>
        </el-form-item>
        <el-form-item label="任务结束时间" style="font-weight:bold;">
          <el-date-picker v-model="formNewWork.endTime" type="date" placeholder="选择日期" format="yyyy 年 MM 月 dd 日"
            value-format="yyyy-MM-dd" style="width:400px;" clearable>
          </el-date-picker>
        </el-form-item>
        <el-form-item label="任务分值" style="font-weight:bold;">
          <el-input v-model="formNewWork.score" placeholder="请输入分值" style="width:400px;" clearable></el-input>
        </el-form-item>
        <el-form-item label="任务要求" style="font-weight:bold;">
          <el-input type="textarea" v-model="formNewWork.requirements" placeholder="请输入" style="width:400px;"
            clearable></el-input>
        </el-form-item>
        <!-- <el-form-item>
          <el-upload action="#" :before-upload="beforeUpload" ref="newuploadin" :show-file-list="false"
            :http-request="uploadHttpRequest" :limit="3" :file-list="fileListOne">
            <el-button size="small" type="text" plain icon="el-icon-document">点击添加附件一</el-button>
          </el-upload>
          <el-input v-model="formNewWork.userName" placeholder="附件备注" style="width:200px;" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-upload action="#" :before-upload="beforeUpload" ref="newuploadin" :show-file-list="false"
            :http-request="uploadHttpRequest" :limit="3" :file-list="fileListOne">
            <el-button size="small" type="text" plain icon="el-icon-document">点击添加附件二</el-button>
          </el-upload>
          <el-input v-model="formNewWork.userName" placeholder="附件备注" style="width:200px;" clearable></el-input>
        </el-form-item> -->
      </el-form>
      <span slot="footer">
        <el-button type="primary" @click="addCourseWork">确定新增</el-button>
      </span>
    </el-dialog>


    <el-drawer :visible.sync="showWorkDetail" direction="btt" size="90%" :with-header="false">
      <div class="workItem">
        <div class="workItem_num">1</div>
        <div class="workItem_content">
          <div class="workItem_content_left">
            <div style="font-weight:bold;width:400px;">作业&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ workItem.name
            }}</div>
            <div>分值({{ workItem.score }})</div>
          </div>
          <div class="workItem_content_left">
            <div style="font-weight:bold;font-size:14px;">时间:&nbsp;&nbsp;</div>
            <div style="font-size:14px;">{{ workItem.starteTime }} ~ {{ workItem.endTime }}</div>
          </div>
          <div class="workItem_content_Left">
            <div style="font-weight:bold;font-size:14px;">要求:&nbsp;&nbsp;</div>
            <div style="font-size:14px;">{{ workItem.requirement }}</div>
          </div>
          <!-- <div class="workItem_content_Left">
            <div style="font-weight:bold;font-size:14px;">附件一:&nbsp;&nbsp;</div>
            <div style="font-size:14px;">任务导学</div>
          </div>
          <div class="workItem_content_Left">
            <div style="font-weight:bold;font-size:14px;">附件二:&nbsp;&nbsp;</div>
            <div style="font-size:14px;">任务导学</div>
          </div> -->
        </div>
        <div class="downLoad" @click="exportEducation">一键导出作业成绩表</div>
      </div>
      <!-- 表格 -->
      <el-table size="medium" :data="tableDataMemberWork" border style="width: 100%;margin-top:20px;">
        <el-table-column prop="id" label="序号" align="center"></el-table-column>
        <el-table-column prop="userName" label="姓名" align="center"></el-table-column>
        <el-table-column prop="userNum" label="学号" align="center"></el-table-column>
        <el-table-column label="提交详情" align="center" width="220">
          <template slot-scope="scope">
            <el-button size="mini" type="success" plain @click="lookMemberWorkDetail(scope.row)">查看</el-button>
          </template>
        </el-table-column>
        <el-table-column label="评分" align="center">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" plain v-if="scope.row.state == 0"
              @click="giveNumDialog(scope.row)">评分</el-button>
            <span v-if="(scope.row.state == 1)">{{ scope.row.score }}</span>
          </template>
        </el-table-column>
      </el-table>
      <!-- 表格 -->
    </el-drawer>

    <el-dialog title="查看成员提交任务" :visible.sync="memberSubmitWork" width="50%" center>
      <div class="workItem" v-for="(item, index) in memberSubmitList" :key="index">
        <div class="workItem_num">{{ index + 1 }}</div>
        <div class="workItem_content">
          <div class="workItem_content_left">
            <div style="font-weight:bold;width:70%;">任务{{ index +
              1 }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ item.name }}</div>
            <div>分值({{ item.score }})</div>
          </div>
          <div class="workItem_content_left">
            <div style="font-weight:bold;font-size:14px;">时间:&nbsp;&nbsp;</div>
            <div style="font-size:14px;">{{ item.startDate }} ~ {{ item.endDate }}</div>
          </div>
          <div class="workItem_content_Left">
            <div style="font-weight:bold;font-size:14px;">要求:&nbsp;&nbsp;</div>
            <div style="font-size:14px;">{{ item.requirements }}</div>
          </div>
        </div>
        <div class="workItem_state" v-if="item.state == 0">未完成</div>
        <div class="workItem_state workItem_state_active" v-if="item.state == 1">已完成</div>
        <div class="workItem_look" @click="lookMemberWorkDetail(item)" style="right:70px;">
          <i class="el-icon-full-screen workItem_look_screen"></i>
          <i class="el-icon-view workItem_look_view"></i>
          <div class="workItem_look_text">查看</div>
        </div>
      </div>
    </el-dialog>

    <el-dialog title="提交详情" :visible.sync="memberWorkDetail" width="80%" center>
      <el-form label-position="right" size="small" label-width="200px">
        <el-form-item label="任务内容" style="font-weight:bold;">
          <el-input type="textarea" v-model="dataWorkDetail.content" style="width:400px;" disabled></el-input>
        </el-form-item>
        <el-form-item label="附件" style="font-weight:bold;">
          <img v-for="item in dataWorkDetail.annex" :key="item" :src="item">
        </el-form-item>
      </el-form>
    </el-dialog>

    <el-dialog title="评分" :visible.sync="markNum" width="80%" center>
      <el-form label-position="right" size="small" label-width="200px">
        <el-form-item label="分数" style="font-weight:bold;">
          <el-input v-model="markNumData.score" style="width:400px;"></el-input>
        </el-form-item>
        <el-form-item label="评价" style="font-weight:bold;">
          <el-input type="textarea" v-model="markNumData.evaluate" style="width:400px;"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer">
        <el-button type="primary" @click="giveNum">点击评分</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import {
  getCourse,
  removeCourse,
  addCourse,
  changeCourse,
  getMember,
  addMember,
  getUserSumbit,
  getCourseWork,
  addCourseWork,
  getCourseWorkSubmit,
  giveNum,
  exportEducation
} from '@/api/PalyEducation/courseManagement/index.js'
import { removeUser } from '@/api/PalyEducation/studentManagement/index.js'

export default {
  data() {
    return {
      active: 'first',
      title: "",
      confirm: "",
      // 课程详情
      courseDetail: "",
      // 成员管理 查看提交任务 弹窗
      memberSubmitWork: false,
      // 成员管理 查看提交任务 
      memberSubmitList: [],
      memberWorkDetail: false,
      showWorkDetail: false,
      courseManage: false,
      memberManage: false,
      workManage: false,
      showList: true,
      // 评分弹窗
      markNum: false,
      queryParams: {
        name: "",
        userName: "",
        num: "",
        startDate: "",
        endDate: "",
        type: "",
        current: 0,
        pageSize: 10,
      },
      formCourse: {
        name: "",
        type: "",
        starteTime: "",
        endTime: "",
        sponsor: "",
        sponsorNum: "",
        phone: "",
        organizer: "",
        introduction: "",
        ask: "",
        cover: ""
      },
      formSearchMember: {
        id: "",
        name: "",
        num: ""
      },
      formNewMember: {
        id: '',
        name: "",
        num: "",
        phone: ""
      },
      memberSubmit: {
        id: "",
        name: "",
        num: ""
      },
      formNewWork: {
        laborId: "",
        score: "",
        name: "",
        guidance: ['https://img2.baidu.com/it/u=3164786770,3776866587&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500'],
        materials: [],
        requirements: '',
        starteTime: '',
        endTime: ""
      },
      workItem: "",
      total: 0,
      tableData: [],
      dataCourseWork: [],
      tableDataMember: [],
      tableDataMemberWork: [],
      dataWorkDetail: {},
      markNumData: {
        id: "",
        userName: "",
        userNum: "",
        score: "",
        evaluate: ""
      },
      fileListOne: [],
      timeNow: ""
    }
  },
  created() {
    this.getCourseList()
  },
  methods: {
    exportEducation() {

    },
    //获取当前时间
    getCurrentTime() {
      var _this = this;
      let yy = new Date().getFullYear();
      let mm = new Date().getMonth() + 1;
      let dd = new Date().getDate();
      let hh = new Date().getHours();
      let mf = new Date().getMinutes() < 10 ? '0' + new Date().getMinutes() : new Date().getMinutes();
      let ss = new Date().getSeconds() < 10 ? '0' + new Date().getSeconds() : new Date().getSeconds();
      _this.gettime = yy + '-' + mm + '-' + dd + ' ' + hh + ':' + mf + ':' + ss;
      this.timeNow = _this.gettime
    },
    // 导出信息
    exportEducation() {
      exportEducation({ id: this.workItem.id }).then(res => {
        const link = document.createElement('a')  //创建a标签
        const blob = new Blob([res.data], { type: 'application/vnd.ms-excel' }) //设置文件流
        link.style.display = 'none'// 设置连接
        link.href = URL.createObjectURL(blob)  //将文件流转化为blob地址
        this.getCurrentTime()
        link.download = '作业成绩表_' + this.timeNow
        document.body.appendChild(link) // 模拟点击事件
        link.click()  //设置点击事件
        this.$message.success('导出成功！')
      })
    },
    // 点击tab
    handleClickTab(tab, event) {
      if (tab.name == "second") {
        this.formSearchMember.id = this.courseDetail.id
        this.formNewMember.id = this.courseDetail.id
        this.memberSubmit.id = this.courseDetail.id
        this.getMemberList()
      }
      if (tab.name == "third") {
        this.formNewWork.laborId = this.courseDetail.id
        this.getCourseWorkList()
      }
    },
    // 新增活动任务
    addCourseWork() {
      addCourseWork(this.formNewWork).then(res => {
        if (res.data.success == true) {
          this.workManage = false
          this.$message({
            message: '添加成功!',
            duration: 1000,
            type: 'success',
            onClose: () => {
              this.getCourseWorkList()
            }
          })
        } else {
          this.$message.info(res.data.message)
        }
      })
    },
    //新增活动成员
    addMember() {
      addMember(this.formNewMember).then(res => {
        if (res.data.success == true) {
          this.memberManage = false
          this.$message({
            message: '添加成功!',
            duration: 1000,
            type: 'success',
            onClose: () => {
              this.getMemberList()
            }
          })
        } else {
          this.$message.info(res.data.message)
        }
      })
    },
    //  删除成员
    removeUser(e) {
      this.$confirm('此操作将删除该学生, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        removeUser({ id: e }).then(res => {
          if (res.data.success == true) {
            this.$message({
              message: '删除成功!',
              duration: 1000,
              type: 'success',
              onClose: () => {
                this.getMemberList()
              }
            })
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    handleAvatarProgress(event, file, fileList) {
      console.log(event);
      console.log(file);
      console.log(fileList);

    },
    handleAvatarSuccess(res, file) {
      console.log(res);
      console.log(file);
      this.formCourse.cover = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
    reset() {
      this.queryParams = {
        name: "",
        userName: "",
        num: "",
        startDate: "",
        endDate: "",
        type: "",
        current: 0,
        pageSize: 10,
      }
      this.getCourseList()
    },
    handleCurrentChange(e) {
      //当前页
      this.queryParams.current = (e - 1) * 10
      this.getCourseList()
    },
    handleSizeChange(e) {
      this.queryParams.pageSize = e
      this.getCourseList()
    },
    // 成员管理 查看
    lookMemberSubmitWork(e) {
      this.memberSubmit.name = e.name
      this.memberSubmit.num = e.number
      getUserSumbit(this.memberSubmit).then(res => {
        if (res.data.success == true) {
          this.memberSubmitList = res.data.data
          this.memberSubmitWork = true
        } else {
          this.memberSubmitList = res.data.data
          this.$message.info(res.data.message)
        }
      })
    },
    // 查看成员作业提交详情
    lookMemberWorkDetail(e) {
      this.dataWorkDetail = e
      this.memberWorkDetail = true
    },
    // 查看作业详情
    lookWorkDetail(e) {
      this.workItem = e.activeTask
      this.getCourseWorkSubmitList()
      this.showWorkDetail = true
    },
    //评分弹窗
    giveNumDialog(e) {
      this.markNumData.id = this.workItem.id
      this.markNumData.userName = e.userName
      this.markNumData.userNum = e.userNum
      this.markNum = true
    },
    //评分
    giveNum() {
      giveNum(this.markNumData).then(res => {
        if (res.data.success == true) {
          this.$message.success('操作成功')
          this.markNum = false
          this.getCourseWorkSubmitList()
        } else {
          this.$message.info(res.data.message)
        }
      })
    },
    beforeUpload(file) {
      // console.log(file)
      // 校验
      let legalName = ["xlsx", "xls"];
      // 拿到后缀名
      let name = file.name.substring(
        file.name.lastIndexOf(".") + 1,
        file.name.length
      );
      if (legalName.includes(name)) {
        // console.log(legalName.includes(name));
      } else {
        this.$message.info("文件格式不对,仅限xls和xlsx");
        return false;
      }
    },
    // 上传附件
    uploadHttpRequest(data) {

    },
    lookDetail(e) {
      this.showList = false
      this.courseDetail = e
    },
    resetFormCourse() {
      this.formCourse = {
        name: "",
        type: "",
        starteTime: "",
        endTime: "",
        sponsor: "",
        sponsorNum: "",
        phone: "",
        organizer: "",
        introduction: "",
        ask: "",
        cover: ""
      }
    },
    addCourse() {
      this.title = "新增课程"
      this.confirm = "确定新增"
      this.resetFormCourse()
      this.formCourse.sponsor = window.localStorage.getItem('name')
      this.formCourse.sponsorNum = window.sessionStorage.getItem('account')
      this.courseManage = true
    },
    changeCourse(e) {
      this.title = "修改课程"
      this.confirm = "确定修改"
      this.resetFormCourse()
      this.formCourse.id = e.id
      this.formCourse.name = e.name
      this.formCourse.type = e.type.toString()
      this.formCourse.starteTime = e.startDate
      this.formCourse.endTime = e.endDate
      this.formCourse.sponsor = e.userName
      this.formCourse.sponsorNum = e.userNum
      this.formCourse.phone = e.phone
      this.formCourse.organizer = e.organizer
      this.formCourse.introduction = e.introduction
      this.formCourse.ask = e.ask
      this.courseManage = true
    },
    comfirmCourse() {
      if (this.title == "新增课程") {
        addCourse(this.formCourse).then(res => {
          if (res.data.success == true) {
            this.courseManage = false
            this.$message({
              message: '添加成功!',
              duration: 1000,
              type: 'success',
              onClose: () => {
                this.reset()
              }
            })
          }
        })
      }
      if (this.title == "修改课程") {
        changeCourse(this.formCourse).then(res => {
          if (res.data.success == true) {
            this.courseManage = false
            this.$message({
              message: '修改成功!',
              duration: 1000,
              type: 'success',
              onClose: () => {
                this.reset()
              }
            })
          }
        })
      }
    },
    removeCourse(e) {
      this.$confirm('此操作将删除该课程, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        removeCourse({ id: e }).then(res => {
          if (res.data.success == true) {
            this.$message({
              message: '删除成功!',
              duration: 1000,
              type: 'success',
              onClose: () => {
                this.reset()
              }
            })
          } else {
            this.$message.info(res.data.message)
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    getCourseList() {
      getCourse(this.queryParams).then(res => {
        if (res.data.success == true) {
          this.tableData = res.data.data.list
          this.total = res.data.data.total
        } else {
          this.tableData = res.data.data
          this.total = ""
          this.$message.info(res.data.message)
        }
      })
    },
    getMemberList() {
      getMember(this.formSearchMember).then(res => {
        if (res.data.success == true) {
          this.tableDataMember = res.data.data
          this.total = res.data.data.total
        } else {
          this.tableDataMember = res.data.data
          this.total = ""
          this.$message.info(res.data.message)
        }
      })
    },
    getCourseWorkList() {
      getCourseWork({ id: this.courseDetail.id }).then(res => {
        if (res.data.success == true) {
          this.dataCourseWork = res.data.data
          this.total = res.data.data.total
        } else {
          this.dataCourseWork = res.data.data
          this.total = ""
          this.$message.info(res.data.message)
        }
      })
    },
    getCourseWorkSubmitList() {
      getCourseWorkSubmit({ id: this.workItem.id }).then(res => {
        if (res.data.success == true) {
          this.tableDataMemberWork = res.data.data
        } else {
          this.tableDataMemberWork = res.data.data
          this.$message.info(res.data.message)
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.navTabBox {
  width: 100%;
  height: 40px;
  border-radius: 6px;
  box-shadow: 1px 1px 1px 1px rgb(200, 200, 200);
  position: relative;
}

.navTab {
  position: absolute;
  left: 30px;
  top: 14px;
}

/* 不被选中时的颜色 */
.el-breadcrumb ::v-deep .el-breadcrumb__inner {
  color: #51A8F8 !important;
  font-weight: 600 !important;
}

/* 被选中时的颜色 */
.el-breadcrumb__item:last-child ::v-deep .el-breadcrumb__inner {
  color: #000 !important;
  font-weight: 600 !important;
}

#back {
  color: #41E314;
  font-size: 26px;
  position: absolute;
  right: 30px;
  top: 6px;
}

.content {
  // margin: 10px 10px;
  width: 100%;
  height: 100%;
  border-radius: 6px;
  // border: 1px solid red;
  position: relative;
  // box-shadow: 1px 1px 1px 1px rgb(149, 149, 149);
}

.content_top {
  width: 92%;
  position: relative;
  left: 4%;
  margin-top: 10px;
  display: flex;
  // align-items: center;
  // border: 1px solid rgb(81, 255, 0);

}

.content_top_right {
  margin-left: 40px;
}

.content_top_right div:nth-child(1) {
  font-size: 18px;
  font-weight: bold;
}

.content_top_right div:nth-child(2) {
  margin-top: 30px;
  font-size: 14px;
}

.content_center {
  width: 92%;
  position: relative;
  left: 4%;
  display: flex;
  margin-top: 30px;
}

.content_nav {
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  box-shadow: 1px 1px 1px 2px rgb(230, 230, 230);
  border-radius: 6px;
  position: relative;
  // border: 1px dashed red;
}

.content_nav_left {
  position: absolute;
  left: 30px;
  width: 200px;
  height: 30px;
  line-height: 30px;
  background-color: #84ACF6;
  color: white;
  border-radius: 4px;
  padding-left: 20px;
}

.content_nav_right {
  position: absolute;
  right: 30px;
}

.workItem {
  width: 100%;
  // height: 120px;
  box-shadow: 1px 1px 1px 2px rgb(230, 230, 230);
  border-radius: 6px;
  position: relative;
  margin-top: 20px;
}

.workItem_num {
  width: 34px;
  height: 34px;
  line-height: 34px;
  text-align: center;
  color: white;
  border-radius: 4px;
  background-color: #84ACF6;
  position: absolute;
  top: 20px;
}

.workItem_content {
  margin-left: 50px;
  overflow: hidden;
}

.workItem_content_left {
  font-size: 16px;
  height: 20px;
  display: flex;
  line-height: 20px;
  margin: 10px 0 10px 0;
  // border: 1px solid red;
}

.workItem_content_Left {
  font-size: 16px;
  display: flex;
  flex-wrap: wrap;
  margin: 10px 0 10px 0;
  // border: 1px solid red;
}

.workItem_person {
  font-weight: bold;
  color: #409EFF;
  position: absolute;
  top: 40px;
  right: 300px;
}

.workItem_look {
  width: 40px;
  height: 40px;
  position: absolute;
  top: 30px;
  right: 170px;
  cursor: pointer;
  // border: 1px solid red;
}

.workItem_look_screen {
  color: #81D231;
  font-size: 40px;
  position: absolute;
  top: 0px;
  right: 0px;
}

.workItem_look_view {
  color: #81D231;
  font-size: 20px;
  position: absolute;
  top: 10px;
  right: 10px;
}

.workItem_look_text {
  color: #81D231;
  font-size: 12px;
  width: 40px;
  text-align: center;
  position: absolute;
  top: 40px;
  font-weight: bold;
}

.workItem_state {
  width: 60px;
  height: 30px;
  border: 1px solid #8c939d;
  color: #8c939d;
  text-align: center;
  line-height: 30px;
  position: absolute;
  top: 40px;
  right: 200px;
}

.workItem_state_active {
  color: #81D231;
  border: 1px solid #81D231;
}

.downLoad {
  font-size: 14px;
  width: 160px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  color: white;
  background-color: #409EFE;
  position: absolute;
  bottom: 30px;
  right: 50px;
  font-weight: bold;
  border-radius: 4px;
  cursor: pointer;
}

.pagination {
  float: right;
  margin-top: 10px;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>